﻿.navbar {
    margin-bottom: 0;
    .nav-main {
        > li > a {
            padding-left: 22px;
            padding-right: 22px;
        }
    }
}

.navbar-brand {
    padding: 0 10px;
    text-align: center;
    line-height: @navbar-height;
    vertical-align: middle;

    img {
        max-height: @navbar-height;
        max-width: 205px;
    }
}

.navbar-default {
    border-bottom: 0;

    .navbar-collapse {
        width: 100%;
        border-top: solid 1px @navbar-default-border;
        max-height: none;
        padding-left: 35px;
    }

    .navbar-inner-wrapper {
        width: 100%;
       .box-shadow(~" 0 1px 12px rgba(0,0,0,.075)");
        border-bottom: solid 1px @navbar-default-border;
    }

    .navbar-toggle {
        border-width: 0 1px 0 0;
        float: left;
        height: @navbar-height;
        margin: 0;
        border-right: solid 1px @navbar-default-border;

        .icon-bar {
            background-color: @navbar-default-link-color !important;
            margin: 4px auto;
        }

        .icon-close {
            color: @brand-primary;
            font-family: @font-family-monospace;
            font-size: 1.5em;
        }

        &:focus, &:hover {
            background-color: transparent !important;
        }

            &:hover .icon-bar {
                background-color: @brand-primary !important;
            }
    }
}

.navbar-brand, .navbar-toggle, .service-nav > div {
    border-right: solid 1px @navbar-default-border;
}

@media (max-width: @screen-sm-max) {
    .navbar-brand, .navbar-toggle, .service-nav > div {

        &.width-50 {
            width: 50%;
        }

        &.width-33 {
            width: 33%;
        }

        &.width-25 {
            width: 25%;
        }

        &.width-20 {
            width: 20%;
        }

        &.width-16 {
            width: 16.6%;
        }

        > a {
            display: block;
            width: 100%;

            &:hover, &:hover span {
                color: @service-menu-link-hover-color;
            }
        }
    }

        .navbar-brand img {
            max-width: 100%;
        }

    .main-container {
        padding-top: 0;
    }

    .navbar-default {
        position: static;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
    .service-nav > div {
        width: auto !important;
        border: 0;
    }

    .navbar-brand {
        width: 205px !important;
        display: block;
        border-right: 0;
    }

    .navbar-toggle {
        width: 100px !important;
    }
}

